<!DOCTYPE html>
<html lang="en">
<head>
    <title>Draw and Modify Features</title>
    <style>
        .map {
            width: 100%;
            height:100%;
        }
    </style>
    <link href="css/ol.css" type="text/css">
    <script src="js/ol.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
<form>
    <label>Geometry type &nbsp;</label>
    <select id="type"><!--单选框-->
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
    </select>
</form>
<script type="text/javascript">
    /*底图*/
    var raster = new ol.layer.Tile({
        source:new ol.source.OSM()
    });

    /*绘制图形的新的矢量图层*/
    var source = new ol.source.Vector();

    var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({   //填充样式
                color: 'rgba(255, 255, 255, 0.2)',   //填充颜色  均为255，为白色
            }),
            stroke: new ol.style.Stroke({  //边界样式
                color: '#DC143C',
                width: 22,   //边界宽度
            }),
            image: new ol.style.Circle({    //点样式
                radius: 20,  //点的半径
                fill: new ol.style.Fill({   //点里的填充
                    color: '#DC143C',
                }),
            }),
        }),
    });

    var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
            center: [-11000000, 4600000],
            zoom: 4,
        }),
    });

    var modify = new ol.interaction.Modify({
        source:source
    });
    map.addInteraction(modify);

    var draw, snap; // global so we can remove them later
    var typeSelect = document.getElementById('type');

    function addInteractions() {
        draw = new ol.interaction.Draw({
            source: source,
            type: typeSelect.value,
        });
        map.addInteraction(draw);
        snap = new ol.interaction.Snap({
            source: source
        });
        map.addInteraction(snap);
    }
    /**
     * Handle change event.
     */
    typeSelect.onchange = function () {
        map.removeInteraction(draw);
        map.removeInteraction(snap);
        addInteractions();
    };
    addInteractions();
</script>
</body>
</html>